<template>
  <Card title="表单域选择窗体" :head-style="{ textAlign: 'center', fontWeight: 'bold' }">
    <div class="w-full flex">
      <BasicForm @register="registerForm">
        <template #imgComb>
          <div>
            <RadioGroup v-model:value="dataRef.comb" button-style="solid">
              <template v-for="item in tjList" :key="`${item.value}`">
                <RadioButton :value="item.value">
                  {{ item.label }}
                </RadioButton>
              </template>
            </RadioGroup>
            <div class="mt-2" v-if="dataRef.comb == 1">
              <a-button
                style="margin: 10px 10px 10px 0"
                :type="dataRef.filter && dataRef.filter.length ? 'primary' : 'default'"
                @click="handleConfiguration"
              >
                配置
              </a-button>
              <Checkbox v-model:checked="dataRef.isUseModuleFilter">
                当配置条件为空时，使用模块中的条件
              </Checkbox>
            </div>
            <NestTableFormDesign
              v-if="dataRef.comb == 2"
              class="mt-2"
              v-model:modelValue="dataRef.conds"
              :formGetFieldsData="formGetFieldsData"
            />
          </div>
        </template>
        <!-- <template #queryTitle>
          <div>
            <span>{{ dataRef.queryName || '' }}</span>
            <a-button type="link" @click="handleSlectSearch" class="ml-5">请选择查询</a-button>
          </div>
        </template> -->
      </BasicForm>
    </div>
    <NestTableFormConfigationModal
      @register="registerNestTableFormConfigationModal"
      @success="handleSuccessNestTableFormConfigationModal"
    />
    <!-- <SelectSearchDataModal
      @register="registerSelectSearchDataModal"
      @success="handleSuccessSelectSearchDataModal"
    /> -->
  </Card>
</template>
<script lang="ts" setup>
  import { ref, PropType, watch, onMounted, nextTick, unref } from 'vue';
  import { BasicForm, useForm } from '/@/components/Form/index';
  import { Card, Radio, Checkbox } from 'ant-design-vue';
  import { FormSchema } from '/@/components/Table';
  import { useModal } from '/@/components/Modal';
  import { NestTableFormConfigationModal } from '../../nestSheet/modules/nestTableFormConfigation';
  import { NestTableFormDesign } from '../../nestSheet/modules/nestTableFormDesign';
  // import { SelectSearchDataModal } from '../../nestSheet/modules/selectSearchData';
  import { getVisualListModule } from '/@/api/formDesign/formDesign';
  import { isArray } from '/@/utils/is';
  const RadioGroup = Radio.Group;
  const RadioButton = Radio.Button;
  const emit = defineEmits(['update:modelValue', 'moduleChangeLeft']);
  const props = defineProps({
    modelValue: {
      type: Object as PropType<Object>,
      default: () => {
        return {};
      },
    },
    type: {
      type: String as PropType<String>,
      default: '1',
    },
    formGetFieldsData: {
      type: Array,
      default: () => [],
    },
  });
  const dataRef = ref<Recordable>({});
  const optionsList = ref<Recordable[]>([]);
  watch(
    () => props.formGetFieldsData,
    async (newVal) => {
      console.log('newVal', newVal);
      await nextTick();
      if (isArray(newVal) && newVal.length) {
        updateSchema([
          {
            field: 'otherShowField',
            componentProps: {
              options: newVal,
            },
          },
        ]);
        updateSchema([
          {
            field: 'otherField',
            componentProps: {
              options: [{ name: 'id', title: 'id' }, ...newVal],
            },
          },
        ]);
      }
    },
    {
      immediate: true,
    },
  );
  watch(
    () => props.modelValue,
    async (newVal) => {
      await nextTick();
      dataRef.value = newVal;
      if (!dataRef.value.comb) {
        dataRef.value.comb = '1';
      }
      resetFields();
      setFieldsValue({
        ...dataRef.value,
      });
    },
    {
      immediate: true,
    },
  );
  const formSchema1: FormSchema[] = [
    {
      field: 'moduleCode',
      label: '源模块',
      required: true,
      component: 'Select',
      colProps: { span: 12 },
      componentProps: {
        showSearch: true,
        options: unref(optionsList),
        optionFilterProp: 'name',
        fieldNames: { label: 'name', value: 'code' },
        onChange: (e: any) => {
          moduleChangeLeft(e);
        },
      },
    },
    {
      field: 'otherField',
      label: '记录',
      required: false,
      component: 'Select',
      colProps: { span: 12 },
      componentProps: {
        showSearch: true,
        options: [],
        optionFilterProp: 'title',
        fieldNames: { label: 'title', value: 'name' },
      },
    },
    {
      field: 'otherShowField',
      label: '显示',
      required: false,
      component: 'Select',
      colProps: { span: 12 },
      componentProps: {
        showSearch: true,
        options: [],
        optionFilterProp: 'title',
        fieldNames: { label: 'title', value: 'name' },
      },
    },
    {
      field: 'imgComb',
      label: '条件',
      required: false,
      component: 'Checkbox',
      colProps: { span: 24 },
      slot: 'imgComb',
    },
  ];
  onMounted(async () => {
    optionsList.value = await getVisualListModule();
    formSchema1[0].componentProps.options = optionsList.value;
    resetSchema(formSchema1);
  });
  // watchEffect(() => {
  //   dataRef.value = props.modelValue;
  // });
  const submit = async () => {
    const data = await validate();
    dataRef.value = Object.assign({}, dataRef.value, data);
    return dataRef.value;
    // emit('update:modelValue', e);
  };
  defineExpose({
    submit,
  });
  const [registerForm, { resetFields, setFieldsValue, validate, resetSchema, updateSchema }] =
    useForm({
      labelWidth: 150,
      schemas: formSchema1,
      showActionButtonGroup: false,
    });

  onMounted(() => {
    resetSchema(formSchema1);
    // setFieldsValue();
  });

  const tjList = [
    {
      value: '1',
      label: '组合条件',
    },
    {
      value: '2',
      label: '脚本条件',
    },
  ];

  const [registerNestTableFormConfigationModal, { openModal: openConfiguration }] = useModal();
  //组合条件配置
  const handleConfiguration = () => {
    openConfiguration(true, {
      list: dataRef.value.filter || [],
      formGetFieldsData: props.formGetFieldsData,
    });
  };
  //配置回调
  const handleSuccessNestTableFormConfigationModal = (val) => {
    dataRef.value.filter = val;
  };

  // const [registerSelectSearchDataModal, { openModal: openSelectSearchDataModal }] = useModal();

  // const handleSuccessSelectSearchDataModal = (record) => {
  //   console.log('handleSuccessSelectSearchDataModal', record);
  //   dataRef.value.queryName = record.name;
  //   dataRef.value.queryId = record.id;
  // };
  // //选择查询
  // const handleSlectSearch = () => {
  //   openSelectSearchDataModal(true, {});
  // };
  //左侧module改变
  const moduleChangeLeft = (e) => {
    console.log('moduleChangeLeft', e);
    if (e) {
      const model = optionsList.value.filter((item) => item.code == e)[0];
      emit('moduleChangeLeft', e, model);
    } else {
      emit('moduleChangeLeft', e, {});
    }
  };
</script>
